import React, { useState, useEffect } from 'react';
import { fetchData } from '../api/index.js';

export default function MyComponent() {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        setIsLoading(true);
        fetchData()
            .then((responseData) => {
                setData(responseData);
                setError(null);
            })
            .catch((error) => {
                setError(error);
            })
            .finally(() => {
                setIsLoading(false);
            });
    }, []); // 空数组表示这个 effect 只在组件挂载时运行一次

    if (isLoading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    if (data) {
        // 假设你的数据是一个对象数组，每个对象都有一个 title 属性
        return (
            <div>
                {data.map((item) => (
                    <div key={item.id}>{item.title}</div>
                ))}
            </div>
        );
    }

    // 如果数据还没加载完或者没有数据，可以返回一个空的状态或者加载指示器
    return <div>No data yet</div>;
}